<template>
  <div class="freezeBox">
    <c-title :text="setHeadTitle()"></c-title>
    <diyBackGroundVue></diyBackGroundVue>
    <div class="love-integral">
      <div>可转换：{{ computAmount }}</div>
      <div class="content">
        <div>请输入要转化的{{ computLoveName }}</div>
        <div class="exchange">
          <i class="iconfont icon-fontclass-jifen"></i>
          <input type="number" class="input" v-model="love_nums" />
          <div class="all" @click="allLove">全部兑换</div>
        </div>
        <div class="tips">
          <template v-if="this.$route.name == 'to-freeze'">
            <span>例如：1个{{ loveData.usable_title }}可以转化{{ loveData.usable_to_freeze_ratio }}{{ loveData.freeze_title }}</span>
          </template>
        </div>
        <div class="confirm" @click="setdata">确认转化</div>
        <div class="tips" v-if="this.$route.name == 'to-freeze'">
          <div>注：转化比例为{{ loveData.usable_to_freeze_ratio_symbol }}%</div>
          <div v-if="love_nums">您实际转账到账数为：{{ love_nums * (loveData.usable_to_freeze_ratio_symbol / 100) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import diyBackGroundVue from "../member/balance/componet/diyBackGround.vue";
export default {
  data() {
    return {
      loveData: {
        love: 0,
        ratio: 0,
        least: 0,
        value: 0
      },
      love_nums: "",
      integral: "消费积分",
      loveName: "爱心值",
      point: "积分"
    };
  },
  components: {
    diyBackGroundVue
  },
  computed: {
    computAmount() {
      if (this.$route.name == "to-freeze") {
        return this.loveData.usable_love;
      }
    },
    computLoveName() {
      if (this.$route.name == "to-freeze") {
        return this.loveData.usable_title;
      } else {
        return this.loveName;
      }
    }
  },
  activated() {
    this.getdata();
  },
  methods: {
    setHeadTitle() {
      let str = "转换" + this.integral;
      if (this.$route.name == "love-point" || this.$route.name == "consumption_dividend_toPoint") {
        str = "转换" + this.point;
      }
      if (this.$route.name == "to-freeze") {
        str = `转换${this.loveData.freeze_title}`;
      }
      return str;
    },
    loading(message) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        message,
        forbidClick: true
      });
    },
    getdata() {
      this.loading("获取数据中...");
      console.log(this.$route.name);
      let url = "";
      let json = {};
      if (this.$route.name == "to-freeze") {
        url = "plugin.love.Frontend.Modules.Love.Controllers.usable-love.transform-freeze";
      }
      $http.post(url, json, "加载中").then(({ result, msg, data }) => {
        this.$toast.clear();
        if (result == 1) this.loveData = data;
        else this.$toast(msg);
        if (this.$route.name == "to-freeze") {
          this.fun.setWXTitle("转换" + this.loveData.freeze_title);
        }
      });
    },
    setdata() {
      if (this.love_nums <= 0 || this.love_nums === "") {
        this.$toast("转化的数量不能为0，也不能为空");
        return;
      }
      let json = { exchange_value: this.love_nums };
      this.loading("正在转化中...");
      let url = "plugin.love.Frontend.Modules.Love.Controllers.usable-love.submit-freeze";
      $http.post(url, json, "").then(({ result, msg, data }) => {
        if (result == 1) {
          this.$toast(msg);
          this.love_nums = "";
          setTimeout(() => {
            this.getdata();
          }, 800);
        } else this.$toast(msg);
      });
    },
    allLove() {
      this.love_nums = Number(this.loveData.usable_love).toFixed(2);
    }
  }
};
</script>

<style scoped lang="scss">
$mt: 0.8rem;
$color: #f15353;

.love-integral {
  text-align: left;
  padding: $mt;
  margin-top: -6rem;

  .content {
    margin-top: $mt;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 rgba(7, 11, 33, 0.11);
    border-radius: 0.2rem;
    padding: $mt 1rem;

    .exchange {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(84, 152, 252, 0.2);
      font-size: 0.75rem;
      padding: $mt 0;
      .input {
        border: none;
        flex: 1;
        padding: 0 1rem;
        color: #333;
        font-size: 1.3rem;
        overflow: auto;
      }
      .icon-fontclass-jifen {
        color: $color;
        font-size: 1.3125rem;
      }
      .all {
        color: $color;
      }
    }
    .tips {
      color: #888;
      margin: $mt 0;
    }

    .confirm {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      font-size: 0.875rem;
      color: #fff;
      background-color: $color;
      border-radius: 0.375rem;
      margin: 0 auto;
    }
  }
}
</style>
